<template>
	<view class="wrap">
		<view class="tHeader">
			<g-header :title="title" :hideRight="true">
				<!-- <view class="tHeader-preview" v-if="pageType == 0">预览</view> -->
			</g-header>
		</view>
		<view class="block">
			<view class="item" @click="onSkipTap('customerList')">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 28rpx;height: 29rpx;" src="../../static/images/icon-addsales-1.png">
						</image>
					</view>
					<text>客户</text>
				</view>
				<view v-if="customer.name" class="item-R app_arrow">{{customer.name +' '+ customer.tel}}</view>
				<view v-else class="item-R app_arrow">选择客户</view>
			</view>
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 21rpx;height: 30rpx;" src="../../static/images/icon-addsales-2.png">
						</image>
					</view>
					<text>地址</text>
				</view>
				<view class="item-R">
					<!-- <input type="text" placeholder="输入地址信息" placeholder-class="app_phc"
						placeholder-style="font-size: 30rpx" /> -->
					{{customer.addId && orderInfo.address ? customer.showAddr : '请先选择客户'}}
				</view>
			</view>
			<view class="item" @click="showDatePicker = true">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-3.png">
						</image>
					</view>
					<text>时间</text>
				</view>
				<view class="item-R app_arrow">
					<picker mode="date" @change="onDateChange">
						{{orderInfo.xsrq || '请选择时间'}}
					</picker>
				</view>
			</view>
			<view class="item" @click="onSkipTap('docMaker')">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-4.png">
						</image>
					</view>

					<text>制单人</text>
				</view>
				<view class="item-R app_arrow">{{orderInfo.zdUser ? zdUser.name : '请选择制单人'}}</view>
			</view>
			<view class="item" @click="onSkipTap('storeInfo')">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-5.png">
						</image>
					</view>
					<text>店铺信息</text>
				</view>
				<view class="item-R app_arrow">查看</view>
			</view>
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-6.png">
						</image>
					</view>
					<text>备注</text>
				</view>
				<view class="item-R">
					<input v-model="orderInfo.remark" type="text" placeholder="输入备注信息" placeholder-class="app_phc"
						placeholder-style="font-size: 30rpx" />
				</view>
			</view>
		</view>
		<view class="block">
			<view class="item" @click="onSkipTap('goodsClass')">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 28rpx;" src="../../static/images/icon-addsales-7.png">
						</image>
					</view>
					<text>选择商品</text>
				</view>
				<view class="item-R app_arrow"></view>
			</view>
			<view class="goodsItemWrap" v-for="(item, index) in gSalesTicketGoodsList" :key="index">
				<view class="goodsItem">
					<view class="goodsItem-img">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="goodsItem-main">
						<view class="goodsItem-title">{{item.productName}}</view>
						<view class="goodsItem-mainB">
							<view class="goodsItem-mainB_L">
								<text v-if="item.goodsType === 'dh'">￥{{item.salePrice}}/{{item.unit}}</text>
								<text v-if="item.goodsType === 'jy'">￥{{item.jyPrice}}/{{item.unit}}</text>
								<text>（{{item.emptyDiff}}）</text>
							</view>
							<view class="goodsItem-mainB_R">货号：{{item.id}}</view>
						</view>
					</view>
				</view>
				<view class="goodsDetail">
					<view class="goodsDetail-header" v-if="item.goodsType === 'dh'">大货</view>
					<view class="goodsDetail-header" v-if="item.goodsType === 'jy'">剪样</view>
					<view class="goodsDetail-main">
						<view class="goodsDetail-item" v-for="(val, idx) in item.colorList" :key="idx"
							@click="onGoodsSizeTap(index, idx, item.goodsType)">
							<view class="goodsDetail-item_L">
								<view class="goodsDetail-item_img">
									<image :src="val.colorUrl" mode=""></image>
								</view>
								<view class="goodsDetail-item_title">
									<text>色号：</text>
									<text>{{`${val.colorCode + val.colorName}`}}</text>
								</view>
							</view>
							<view class="goodsDetail-item_R">
								<template v-if="item.goodsType === 'dh'">
									<text>￥{{val.price}}</text>
									<text>x{{val.totalCount}}/{{item.unit}}</text>
								</template>
								<template v-if="item.goodsType === 'jy'">
									<text>￥{{val.jyPrice}}</text>
									<text>x{{val.count}}/{{item.unit}}</text>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block" v-if="gSalesTicketGoodsList.length > 0">
			<view class="item">
				<view class="item-L">
					<text>订单金额</text>
				</view>
				<view class="item-R">¥{{totalPrice}}</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>货拉拉费用</text>
				</view>
				<view class="item-R">
					<input v-model="orderInfo.hllPrices" type="number" placeholder="请输入货拉拉费用"
						placeholder-class="app_phc" placeholder-style="font-size: 30rpx">
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>合计人民币</text>
				</view>
				<view class="item-R">¥{{totalRMB}}</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>已收款</text>
				</view>
				<view class="item-R">
					<input v-model="orderInfo.moneyReceived" type="number" placeholder="请输入已收款"
						placeholder-class="app_phc" placeholder-style="font-size: 30rpx">
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>收款方式</text>
				</view>
				<view class="item-R app_arrow" @click="showPayTypePicker = true">
					{{orderInfo.payType || '请选择'}}
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>前期欠款</text>
				</view>
				<view class="item-R">￥{{customer.frontArrears || 0}}</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>总欠款</text>
				</view>
				<view class="item-R">￥{{allArrears}}</view>
			</view>
		</view>
		<p-chooseGoods-submitbar title="确认" v-if="pageType == 0" @confirm="onConfirmTap" :amount="totalRMB">
		</p-chooseGoods-submitbar>
		<p-chooseGoods-submitbar title="保存" v-if="pageType == 2" @confirm="onConfirmTap" :amount="totalRMB">
		</p-chooseGoods-submitbar>
		<view class="editSubmitBar" v-if="pageType == 1">
			<view class="editSubmitBar-del">
				<image src="../../static/images/icon-del.png"></image>
			</view>
			<view class="editSubmitBar-btn">再来一单</view>
			<view class="editSubmitBar-btn">查看PDF</view>
			<view class="editSubmitBar-edit">
				<g-btn title="编辑" :customstyle="{width: '180rpx', height: '70rpx'}"></g-btn>
			</view>
		</view>
		<u-popup v-model="showPayTypePicker" mode="bottom" z-index="10088" border-radius="10">
			<view class="payTypePop">
				<view class="payTypePop-item" v-for="(item, index) in payTypeList" :key="index"
					@click="onPayTypeTap(index)">{{item.payType}}</view>
				<view class="payTypePop-cancel" @click="showPayTypePicker = false">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
		<!-- 修改剪样价格数量 -->
		<u-popup v-model="showCountJYflag" mode="bottom" z-index="10088" border-radius="10">
			<view class="countJYPop">
				<view class="countJYPop-close">
					<icon type="clear" color="#e1e1e1" size="18" @click="showCountJYflag = false"></icon>
				</view>
				<view class="countJYPop-header">确定数量</view>
				<scroll-view class="countJYPop-list">
					<view class="countJYPop-item">
						<view class="countJYPop-img">
							<image :src="tempGoodsItem.colorUrl" mode=""></image>
						</view>
						<view class="countJYPop-main">
							<view class="countJYPop-title app_ellipsis">{{tempGoodsItem.colorName}}</view>
							<view class="countJYPop-mainM">
								<text>￥</text>
								<text>{{tempGoodsItem.jyPrice}}</text>
							</view>
						</view>
						<view class="countJYPop-R">
							<u-number-box ref="numberStep" v-model="tempGoodsItem.count" input-height="54"
								@change="onJYEditCountChange">
							</u-number-box>
							<view class="countJYPop-mdPrice app_arrow" @click="showMDYPriceTap">修改单价</view>
						</view>
					</view>
				</scroll-view>
				<view class="countJYPop-btn">
					<g-btn title="确认修改" @click="onJYEditConfirm"></g-btn>
				</view>
			</view>
		</u-popup>
		<!-- 修改剪样价格数量 end -->
		<!-- 修改单价 -->
		<u-popup v-model="showMDYPriceflag" mode="center" z-index="10099" border-radius="10">
			<view class="mdyPricePop">
				<view class="mdyPricePop-header">修改单价</view>
				<view class="mdyPricePop-main">
					<view class="mdyPricePop-input">
						<input v-model="tempPrice" type="number" placeholder="请输入价格" placeholder-class="phcClass">
					</view>
					<view class="mdyPricePop-tips">
						<text>注：</text>
						<text>修改单价只在当前订单生效，不会改变商品正常售价。</text>
					</view>
				</view>
				<view class="mdyPricePop-footer">
					<view class="mdyPricePop-btn" @click="showMDYPriceflag = false">取消</view>
					<view class="mdyPricePop-btn" @click="changePrice">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 确定数量（大货） -->
		<u-popup v-model="showCountDHflag" mode="bottom" z-index="10088" border-radius="10">
			<view class="countDHPop" v-if="tempGoodsItem && tempGoodsItem.dhCountArr">
				<view class="countDHPop-close">
					<icon type="clear" color="#e1e1e1" size="18" @click="showCountDHflag = false"></icon>
				</view>
				<view class="countDHPop-header">确定数量</view>
				<scroll-view class="countDHPop-list" scroll-y="true">
					<view class="countDH-list">
						<view class="countDH-item">
							<view class="countDH-img">
								<image :src="tempGoodsItem.colorUrl"></image>
							</view>
							<view class="countDH-main">
								<view class="countDH-title app_ellipsis">{{tempGoodsItem.colorName}}</view>
								<view class="countDH-mainM">
									<text>￥</text>
									<text>{{tempGoodsItem.price}}</text>
								</view>
							</view>
							<view class="countDH-R">
								<view class="countDH-R_btn" @click="showMDYPriceflag = true">修改单价</view>
							</view>
						</view>
					</view>
					<view class="emptyDiff app_flex-aicjcsb">
						<view class="emptyDiff-label">设置空差</view>
						<view class="emptyDiff-R app_flex-aic">
							<input v-model="customEmptyDiff" placeholder="请输入空差" placeholder-style="color:#ccc"
								@blur="checkCustomEmptyDiff">
							<view class="emptyDiff-unit" @click="showUnitSelectFlag = true">
								{{customEmptyDiffUnitLabel || '+/-'}}
							</view>
						</view>
					</view>
					<u-select v-model="showUnitSelectFlag" :list="unitSelectList" @confirm="onUnitSelectConfirm">
					</u-select>
					<view class="detail">
						<u-swipe-action :show="item.show" :index="index"
							v-for="(item, index) in tempGoodsItem.dhCountArr" @click="dhItemDel" @open="open"
							:options="options">
							<view class="block" style="margin-top: 0;">
								<view class="block-L">第{{index/1 + 1}}条</view>
								<view class="block-R">
									<input v-model="tempGoodsItem.dhCountArr[index]" type="number" placeholder="请输入数量"
										placeholder-style="color:#ccc">
									<text>{{tempGoodsItem.unit}}</text>
								</view>
							</view>
						</u-swipe-action>

						<view class="addBlock" @click="addItem">
							<image src="../../static/images/icon-tianjia.png"></image>
							<text>添加</text>
						</view>
					</view>
				</scroll-view>
				<view class="countDHPop-btn">
					<g-btn title="确认修改" @click="onDHEditConfirm"></g-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let lockSubmit = false
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				pageType: 0, // 0 新增销售单, 1 销售单详情, 2编辑销售单
				title: '新增销售单',
				// list: [],
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				showDatePicker: false,
				showPayTypePicker: false,
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				orderInfo: {
					// customer: '',
					// addr: '广州市天河区体育西路',
					// date: '',
					// docMaker: '',
					// remark: '',
					// amount: 11000,
					// hllAmount: 500,
					// totalAmount: 11500,
					// hasPay: 10000,
					// payWay: 1,
					// earlyDebt: 1000,
					// totalDebt: 2500,
					address: '', // 地址编号
					allArrears: '', // 总欠款
					contractPrices: 0, // 总金额
					customer: '', // 客户编号
					gatherPrice: 0, // 收款金额
					hllPrices: '', // 货拉拉金额
					jsonStr: '', // 商品json
					orderPrices: 0, // 订单金额
					payType: '', // 收款方式
					remark: '', // 备注
					xsrq: '', // 销售日期
					zdUser: '', // 制单人
					moneyReceived: '', // 收款金额
				}, // 销售单详情
				customer: {
					frontArrears: ''
				},
				zdUser: {

				},
				payTypeList: [],
				showCountJYflag: false, // 修改剪样弹窗
				tempGoodsItem: {},
				tempGoodsIndex: -1,
				tempGoodsIdx: -1,
				showMDYPriceflag: false,
				showCountDHflag: false,
				tempPrice: '',
				customEmptyDiff: '',
				customEmptyDiffUnit: '',
				customEmptyDiffUnitLabel: '',
				showUnitSelectFlag: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				unitSelectList: [{
					label: '+',
					value: '1'
				}, {
					label: '-',
					value: '2'
				}, {
					label: '*',
					value: '3'
				}, {
					label: '/',
					value: '4'
				}]
			}
		},
		computed: {
			list() {
				if (this.tempGoodsItem && this.tempGoodsItem.dhCountArr) {
					return this.tempGoodsItem.dhCountArr.map(item => {
						return {
							value: item,
							show: false
						}
					})
				} else {
					return []
				}
			},
			totalPrice() {
				const price = this.gSalesTicketGoodsList.reduce((total, item) => {
					return total / 1 + item.colorList.reduce((t, v) => {
						if (item.goodsType == 'dh') {
							return t / 1 + v.totalCount * v.price
						} else if (item.goodsType == 'jy') {
							return t / 1 + v.count * v.jyPrice
						} else {
							return t
						}
					}, 0)
				}, 0)
				return price.toFixed(1)
			},
			totalRMB() {
				let num = this.totalPrice / 1 + Number(this.orderInfo.hllPrices)
				return num.toFixed(1)
			},
			/**
			 * 总欠款
			 */
			allArrears() {
				// console.log(this.totalRMB);
				// console.log(Number(this.customer?.frontArrears));
				// console.log(Number(this.orderInfo.moneyReceived));
				let num = this.totalRMB / 1 + Number(this.customer?.frontArrears) - Number(this.orderInfo.moneyReceived)
				return num.toFixed(1)
			}
		},
		onLoad(options) {
			console.log(options);
			this.setTitle(options.pageType)
			this.getPayTypeList()
			if (options.customer) {
				this.customerChange(JSON.parse(options.customer))
			}
			// 编辑
			if (options.pageType == 2) {
				this.setEditOrderInfo(JSON.parse(options.orderInfo))
			}
			// 再来一单
			if (options.pageType == 0 && options.orderInfo) {
				this.setEditOrderInfo(JSON.parse(options.orderInfo))
			}
		},
		onShow() {},
		onUnload() {
			uni.$off('update-addSalesOrderCustomer', this.customerChange)
			uni.$off('update-addSalesOrderdocMaker', this.docMakerChange)
		},
		methods: {
			/**
			 * 设置navigationBarTitle
			 */
			setTitle(type = 0) {
				const titleArr = [
					'新增销售单',
					'销售单详情',
					"编辑销售单"
				]
				this.pageType = type
				this.title = titleArr[type]
			},
			/**
			 * 根据已存在订单信息赋值
			 */
			setEditOrderInfo(orderInfo) {
				console.log(orderInfo);
				this.getEditOrderInfoGoodsList(orderInfo.orderList)
				Object.keys(this.orderInfo).forEach(key => {
					if (['hllPrices'].includes(key)) {
						this.orderInfo[key] = orderInfo[key] || 0
					} else {
						orderInfo[key] && (this.orderInfo[key] = orderInfo[key])
					}
				})
				this.orderInfo.id = orderInfo.id
				this.customerChange({
					id: orderInfo.saleslipCustomer.id,
					name: orderInfo.saleslipCustomer.name,
					tel: orderInfo.saleslipCustomer.tel,
					addId: orderInfo.saleslipAddress.id,
					frontArrears: orderInfo.saleslipCustomer?.frontArrears || 0,
					showAddr: orderInfo.saleslipAddress.provinceStr + orderInfo.saleslipAddress.cityStr + orderInfo
						.saleslipAddress.countyStr + orderInfo.saleslipAddress.address
				})
				this.orderInfo.zdUser = orderInfo.zdUser
				this.getSaleslipAuthors(orderInfo.zdUser)
				this.orderInfo.moneyReceived = orderInfo.gathers[0]?.gatherPrice || 0
				this.orderInfo.payType = orderInfo.gathers[0].gatherType
				// this.orderInfo.address = orderInfo.address // 地址编号
				// this.orderInfo.allArrears = orderInfo.allArrears // 总欠款
				// this.orderInfo.contractPrices = orderInfo.contractPrices // 总金额
				// this.orderInfo.customer = orderInfo.customer // 客户编号
				// this.orderInfo.gatherPrice = orderInfo.gatherPrice // 收款金额
				// this.orderInfo.hllPrices = orderInfo.hllPrices // 货拉拉金额
				// this.orderInfo.jsonStr = orderInfo.jsonStr // 商品json
				// this.orderInfo.orderPrices = orderInfo.orderPrices // 订单金额
				// this.orderInfo.payType = orderInfo.payType // 收款方式
				// this.orderInfo.remark = orderInfo.remark // 备注
				// this.orderInfo.xsrq = orderInfo.xsrq // 销售日期
				// this.orderInfo.zdUser = orderInfo.zdUser // 制单人
				// this.orderInfo.moneyReceived = orderInfo.moneyReceived // 收款金额
			},
			/**
			 * 根据已存在订单信息获取商品列表
			 */
			getEditOrderInfoGoodsList(goodsList) {
				let list = []
				goodsList.forEach(item => {
					let goodsType = 'jy'
					if (!item.cutt || item.cutt === 'false') {
						goodsType = 'dh'
						item.dhCountArr = item.finecode.split('、')
						item.customEmptyDiff = item.dws
						item.customEmptyDiffUnit = item.formula
						item.totalCount = item.dhCountArr.reduce((total, item) => {
							return total / 1 + item / 1
						}, 0)
					}
					// 对接差异字段
					item.colorName = item.color
					item.count = item.finecode
					item.jyPrice = item.unitPrice
					item.price = item.unitPrice
					item.colorCode = item.colorCode || ''
					/****************************/
					let tempIndex = list.findIndex(val => (val.goodsType === goodsType && val.id === item
						.productId))
					console.log(tempIndex);
					if (tempIndex != -1) {
						list[tempIndex].colorList.push(item)
					} else {
						list.push({
							colorList: [item],
							cover: item.image,
							emptyDiff: item.emptyDiff || '',
							goodsType,
							id: item.productId,
							jyPrice: item.unitPrice,
							productName: item.product,
							salePrice: item.price,
							startNum: item.startNum,
							unit: item.company
						})
					}
				})

				this.$store.commit('updateSalesTicketGoodsList', list)
			},
			onSkipTap(type, index) {
				const urlObj = {
					customerList: () => {
						uni.$off('update-addSalesOrderCustomer', this.customerChange)
						uni.$on('update-addSalesOrderCustomer', this.customerChange)
						uni.navigateTo({
							url: '/pages/customerManagement/customerList?backType=1'
						})
					},
					docMaker: () => {
						uni.$off('update-addSalesOrderdocMaker', this.docMakerChange)
						uni.$on('update-addSalesOrderdocMaker', this.docMakerChange)
						uni.navigateTo({
							url: '/pages/salesManagerment/docMaker'
						})
					},
					storeInfo: '/pages/shopInfo/storeInfo',
					goodsClass: '/pages/commodityManagement/goodsClass?pageType=selectGoods',
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			customerChange(customer) {
				if (customer && customer.addId) {
					this.customer = customer
					this.orderInfo.address = customer.addId
					// this.getCustomer()
					this.getDebt()
				}
			},
			docMakerChange(zdUser = {}) {
				this.orderInfo.zdUser = zdUser.id || ''
				this.zdUser = zdUser
			},
			getSaleslipAuthors(zdUserId) {
				this.$g_api.saleslipGetAuthors().then(({
					data
				}) => {
					this.zdUser = data.find(item => item.id = zdUserId) || {}
				})
			},
			onDateChange(e) {
				const {
					value
				} = e.detail
				console.log(value);
				this.orderInfo.xsrq = value
			},
			getPayTypeList() {
				this.payTypeList = [{
					payType: '支付宝'
				}, {
					payType: '微信'
				}, {
					payType: '现金'
				}, {
					payType: '银行卡'
				}]
				// this.$g_api.saleslipPayTypeList().then(({
				// 	data
				// }) => {
				// 	console.log(data);
				// 	data.forEach(item => {
				// 		item.active = false
				// 	})
				// 	this.payTypeList = data
				// })
			},
			onPayTypeTap(index) {
				this.payTypeList.forEach((item, idx) => {
					item.active = index == idx
				})
				this.orderInfo.payType = this.payTypeList[index].payType
				this.showPayTypePicker = false
			},
			/**
			 * 通过客户信息查询欠款
			 */
			getCustomer() {
				if (!this.customer.frontArrears) {
					this.$g_api.saleslipGetCustomer({
						id: this.customer.id
					}).then(({
						data
					}) => {
						console.log(data);
						this.customer.frontArrears = data.frontArrears || 0
					})
				}
			},
			/**
			 * 查询客户欠款
			 */
			getDebt() {
				this.$g_api.saleslipGetDebt({
					customerId: this.customer.id
				}).then(({
					data
				}) => {
					if(data > 0) {
						this.customer.frontArrears = data.toFixed(1)
					} else {
						this.customer.frontArrears = 0
					}
					
				})
			},
			async checkParams() {
				if (!this.customer?.id) return Promise.reject('请选择客户')
				if (!this.orderInfo?.xsrq) return Promise.reject('请选择时间')
				if (!this.zdUser?.id) return Promise.reject('请选择制单人')
				if (this.gSalesTicketGoodsList?.length == 0) return Promise.reject('请选择商品')
				if (!this.orderInfo?.hllPrices && this.orderInfo.hllPrices !== 0) return Promise.reject('请选择输入货拉拉费用')
				if (!this.orderInfo?.moneyReceived && this.orderInfo.moneyReceived !== 0) return Promise.reject(
					'请输入已收款金额')
				if (!this.orderInfo?.payType && this.orderInfo.payType !== 0) return Promise.reject('请选择收款方式')
				const jsonStr = []
				let numCount = 0 // 总条数
				let totalCount = 0 // 总数量
				let jiaj = 0
				this.gSalesTicketGoodsList.forEach((item, index) => {
					item.colorList.forEach((val, idx) => {
						let obj = {
							"product": item.productName,
							"product_id": item.id,
							"color": `${val.colorName} ${val.colorCode}`,
							// "dws": 5,
							// "formula": 2
						}
						if (item.goodsType === 'dh') {
							totalCount = val.dhCountArr.reduce((total, v) => {
								return total / 1 + v / 1
							}, totalCount)
							totalCount = totalCount.toFixed(1)
							numCount = numCount / 1 + val.dhCountArr.length / 1
							let ysxm = this.inverseDhCount(val.dhCountArr, val)
							let tempYSXMTotalcount = ysxm.reduce((total, v) => {
								return total / 1 + v / 1
							}, 0)
							jiaj = jiaj / 1 + totalCount / 1 - tempYSXMTotalcount / 1
							let tempJiaj = totalCount / 1 - tempYSXMTotalcount / 1
							obj.jiaj = tempJiaj.toFixed(1)
							obj.ysxm = ysxm.join('、')
							obj.finecode = val.dhCountArr.join('、')
							obj.unit_price = val.price
							obj.price = (val.totalCount * val.price).toFixed(1)
							obj.cutt = false
							obj.dws = val.customEmptyDiff // 大货编辑数量时自定义空差
							obj.formula = val.customEmptyDiffUnit // 自定义空差单位
						}
						if (item.goodsType === 'jy') {
							totalCount = totalCount / 1 + val.count / 1
							totalCount = totalCount.toFixed(1)
							numCount = numCount / 1 + 1
							obj.finecode = val.count
							obj.ysxm = val.count
							obj.jiaj = 0
							obj.unit_price = val.jyPrice
							obj.price = (val.jyPrice * val.count).toFixed(1)
							obj.cutt = true
						}
						jsonStr.push(obj)
					})
				})
				return Promise.resolve({
					address: this.orderInfo.address,
					allArrears: this.allArrears,
					contractPrices: this.totalRMB,
					totalPrice: this.totalPrice,
					customer: this.customer.id,
					gatherPrice: this.orderInfo.moneyReceived,
					hllPrices: this.orderInfo.hllPrices,
					jsonStr: JSON.stringify(jsonStr),
					orderPrices: this.totalPrice,
					payType: this.orderInfo.payType,
					remark: this.orderInfo.remark,
					xsrq: this.orderInfo.xsrq,
					zdUser: this.zdUser.id,
					numCount,
					totalCount,
					// jiaj
				})
			},
			async onConfirmTap() {
				if (lockSubmit) return
				lockSubmit = true
				setTimeout(() => {
					lockSubmit = false
				}, 1000)
				// console.log(await this.checkParams());
				// return 
				try {
					uni.showLoading({
						title: '提交中'
					})
					if (this.pageType == 2) {
						let params = await this.checkParams()
						params.saleslipId = this.orderInfo.id
						await this.$g_api.saleslipEditSaleslip(params)
					} else {
						await this.$g_api.saleslipAddSaleslip(await this.checkParams())
					}
					uni.showToast({
						title: '成功'
					})
					this.$store.commit('updateSalesTicketGoodsList', [])
					uni.$emit('update-salesList')
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.toString(),
						icon: 'none'
					})
				}
				uni.hideLoading()
			},
			inverseDhCount(arr, data) {
				if (!data.customEmptyDiffUnit || (!data.customEmptyDiff && data.customEmptyDiff !== 0)) {
					return arr
				}
				return arr.map(item => {
					if (data.customEmptyDiffUnit == 1) {
						item -= data.customEmptyDiff
					} else if (data.customEmptyDiffUnit == 2) {
						item = item / 1 + data.customEmptyDiff / 1
					} else if (data.customEmptyDiffUnit == 3) {
						if (data.customEmptyDiff === 0) {
							uni.showToast({
								title: '分母不能为0',
								icon: 'none'
							})
							return item
						}
						// item /= data.customEmptyDiff
						item = Math.floor(item * 100 / data.customEmptyDiff) / 100
					} else if (data.customEmptyDiffUnit == 4) {
						item *= data.customEmptyDiff
					}
					return item.toFixed(1)
				})
			},
			onGoodsSizeTap(index, idx, goodsType) {
				this.tempGoodsIndex = index
				this.tempGoodsIdx = idx
				let goodsList = this.$deepClone(this.gSalesTicketGoodsList)
				let goodsItem = goodsList[index].colorList[idx]
				goodsItem.unit = goodsList[index].unit
				this.tempGoodsItem = goodsItem

				if (goodsType === 'jy') {
					this.showCountJYflag = true
				} else if (goodsType === 'dh') {
					this.customEmptyDiff = goodsItem.customEmptyDiff
					this.customEmptyDiffUnitLabel = this.unitSelectList.find(v => v.value == goodsItem.customEmptyDiffUnit)
						.label
					this.customEmptyDiffUnit = goodsItem.customEmptyDiffUnit
					this.showCountDHflag = true
				}
			},
			onJYEditConfirm() {
				if (this.tempGoodsItem.count == 0) {
					uni.showToast({
						title: '数量不能为0',
						icon: 'none'
					})
					return
				}
				this.showCountJYflag = false
				if (this.tempGoodsIndex == -1 || this.tempGoodsIdx == -1) {
					uni.showToast({
						title: '编辑失败',
						icon: 'none'
					})
					return
				}
				let goodsList = this.$deepClone(this.gSalesTicketGoodsList)
				goodsList[this.tempGoodsIndex].colorList[this.tempGoodsIdx] = this.tempGoodsItem
				this.$store.commit('updateSalesTicketGoodsList', goodsList)
				this.tempGoodsIndex = -1
				this.tempGoodsIdx = -1
			},
			onJYEditCountChange(e) {
				console.log(e);
				let {
					value
				} = e
				let goodsList = this.$deepClone(this.gSalesTicketGoodsList)
				if (value == 0) {
					uni.showModal({
						title: '提示',
						content: '是否删除?',
						success: ({
							confirm
						}) => {
							if (confirm) {
								goodsList[this.tempGoodsIndex].colorList.splice(this.tempGoodsIdx, 1)
								if (goodsList[this.tempGoodsIndex].colorList.length === 0) {
									goodsList.splice(this.tempGoodsIndex, 1)
								}
								this.$store.commit('updateSalesTicketGoodsList', goodsList)
							}
						}
					})
				}
			},
			onDHEditConfirm() {
				if (!this.tempGoodsItem?.dhCountArr || this.tempGoodsItem.dhCountArr.length === 0) {
					uni.showToast({
						title: '至少有一条',
						icon: 'none'
					})
					return
				}
				this.showCountDHflag = false
				if (this.tempGoodsIndex == -1 || this.tempGoodsIdx == -1) {
					uni.showToast({
						title: '编辑失败',
						icon: 'none'
					})
					return
				}
				let count = this.tempGoodsItem.dhCountArr.reduce((total, item) => {
					return total / 1 + this.calcDhCountItem(item) / 1
				}, 0) || 0
				this.tempGoodsItem.totalCount = count.toFixed(1)
				let goodsList = this.$deepClone(this.gSalesTicketGoodsList)
				goodsList[this.tempGoodsIndex].colorList[this.tempGoodsIdx] = this.tempGoodsItem
				this.$store.commit('updateSalesTicketGoodsList', goodsList)
				this.tempGoodsIndex = -1
				this.tempGoodsIdx = -1
			},
			calcDhCountItem(val) {
				if (!this.customEmptyDiffUnit || (!this.customEmptyDiff && this.customEmptyDiff !== 0)) {
					return val
				}
				if (this.customEmptyDiffUnit == 1) {
					val = val / 1 + this.customEmptyDiff / 1
				} else if (this.customEmptyDiffUnit == 2) {
					val -= this.customEmptyDiff
				} else if (this.customEmptyDiffUnit == 3) {
					val *= this.customEmptyDiff
				} else if (this.customEmptyDiffUnit == 4) {
					if (this.customEmptyDiff === 0) {
						uni.showToast({
							title: '分母不能为0',
							icon: 'none'
						})
						return val
					}
					// val /= this.customEmptyDiff
					val = Math.floor(val * 100 / this.customEmptyDiff) / 100
					val = val.toFixed(1)
				}
				return val
			},
			showMDYPriceTap() {
				this.showMDYPriceflag = true
				this.tempPrice = this.tempGoodsItem.jyPrice
			},
			changePrice() {
				if (this.showCountJYflag) {
					this.tempGoodsItem.jyPrice = this.tempPrice
				} else if (this.showCountDHflag) {
					this.tempGoodsItem.price = this.tempPrice
				}
				this.showMDYPriceflag = false
				this.tempPrice = ''
			},
			calcDHItemCount(dh = []) {
				let num = dh.reduce((total, item) => {
					return total / 1 + item / 1
				}, 0)
				return num.toFixed(1)
			},
			onUnitSelectConfirm(e) {
				this.customEmptyDiffUnit = e[0].value
				this.customEmptyDiffUnitLabel = e[0].label
			},
			checkCustomEmptyDiff() {
				if (!this.$verificationPositiveNumber.test(this.customEmptyDiff)) {
					uni.showToast({
						title: '请输入数字',
						icon: 'none'
					})
					this.customEmptyDiff = ''
				}
			},
			/**
			 * 添加新条项
			 */
			addItem() {
				if (this.tempGoodsItem?.dhCountArr?.length > 0) {
					this.tempGoodsItem.dhCountArr.push('')
				} else {
					this.tempGoodsItem.dhCountArr = ['']
				}
			},
			dhItemDel(index, index1) {
				this.tempGoodsItem.dhCountArr.splice(index, 1);
				// this.$nextTick(() => {
				// 	this.tempGoodsItem.dhCountArr[index].show = true;
				// 	this.tempGoodsItem.dhCountArr.map((val, idx) => {
				// 		this.tempGoodsItem.dhCountArr[idx].show = false;
				// 	})

				// })
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.tempGoodsItem.dhCountArr[index].show = true;
				this.tempGoodsItem.dhCountArr.map((val, idx) => {
					if (index != idx) this.tempGoodsItem.dhCountArr[idx].show = false;
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx);
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom) + 20rpx);
	}

	.tHeader {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		border-bottom: 1px solid $g-border-color;
		z-index: 10086;
	}

	.tHeader-preview {
		font-size: 28rpx;
		color: #666;
	}

	.block {
		margin-top: 20rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.item-L {
		display: flex;
		align-items: center;
		color: #808080;
	}

	.item-L_img {
		margin-right: 20rpx;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item-R {
		&.app_arrow {
			padding-right: 30rpx;

			&::after {
				width: 12rpx;
				height: 12rpx;
				right: 10rpx;
			}
		}

		input {
			text-align: right;
		}
	}

	.timePick-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
	}

	.timePick-header_cancel {
		color: #999;
	}

	.timePick-header_title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.timePick-header_confirm {
		color: $g-main-color;
	}

	.timePick-picker {
		width: 750rpx;
		height: 300rpx;
		margin-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.timePick-pickerItem {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
	}

	.goodsItemWrap {
		padding-bottom: 30rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.goodsItem {
		display: flex;
		padding: 30rpx 20rpx 0;
	}

	.goodsItem-img {
		width: 140rpx;
		font-size: 0;

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.goodsItem-main {
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goodsItem-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.goodsItem-mainB {
		display: flex;
		justify-content: space-between;
	}

	.goodsItem-mainB_L {
		text {
			&:first-child {
				color: #FF4C4C;
				font-size: 26rpx;
			}

			&:last-child {
				color: #999999;
				font-size: 20rpx;
			}
		}
	}

	.goodsItem-mainB_R {
		font-size: 24rpx;
		color: #999;
	}

	.goodsDetail {
		padding: 0 20rpx;
		background-color: #fff;
	}

	.goodsDetail-header {
		line-height: 70rpx;
	}

	.goodsDetail-main {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #F7F7F7;
	}

	.goodsDetail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.goodsDetail-item_L {
		display: flex;
		align-items: center;
	}

	.goodsDetail-item_img {
		width: 50rpx;
		margin-right: 20rpx;
		font-size: 0;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 4rpx;
			background-color: skyblue;
		}
	}

	.goodsDetail-item_title {
		font-size: 24rpx;
		color: #333;
	}

	.goodsDetail-item_R {
		text {
			font-size: 24rpx;

			&:nth-child(1) {
				color: #FF4C4C;
			}

			&:nth-child(2) {
				color: #333;
			}
		}
	}

	.payTypePop {}

	.payTypePop-item {
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid $g-border-color;
	}

	.payTypePop-cancel {
		line-height: 100rpx;
		border-top: 20rpx solid $g-border-color;
		text-align: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		text {
			display: block;
			line-height: 100rpx;
			width: 750rpx;
			border-bottom: 1px solid $g-border-color;
		}
	}

	.editSubmitBar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 690rpx;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 999;
		background-color: #fff;
		box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.editSubmitBar-del {
		width: 80rpx;
		height: 100rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.editSubmitBar-btn {
		width: 180rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 36rpx;
		box-sizing: border-box;
		border: 1px solid #ccc;
	}

	.editSubmitBar-edit {}

	.countJYPop {
		position: relative;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
	}

	.countJYPop-close {
		position: absolute;
		right: 20rpx;
		top: 30rpx;
	}

	.countJYPop-header {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.countJYPop-list {
		padding: 30rpx 30rpx 0;
	}

	.countJYPop-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.countJYPop-img {
		width: 120rpx;
		flex-shrink: 0;
		margin-right: 20rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.countJYPop-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		max-width: 340rpx;
	}

	.countJYPop-title {
		// max-width: 340rpx;
	}

	.countJYPop-mainM {
		text {
			&:first-child {
				font-size: 20rpx;
				color: #ff4c4c;
			}

			&:nth-child(2) {
				font-size: 28rpx;
				color: #ff4c4c;
			}

			&:nth-child(3) {
				font-size: 20rpx;
				color: #ff4c4c;
			}

			&:nth-child(4) {
				font-size: 20rpx;
				color: #999;
			}

			&:nth-child(5) {
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.countJYPop-tips {
		font-size: 24rpx;
		color: #999;
	}

	.countJYPop-R {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		margin-left: 20rpx;
		flex-shrink: 0;
		max-width: 190rpx;
	}

	.countJYPop-mdPrice {
		padding-right: 26rpx;

		&::after {
			right: 10rpx;
		}
	}

	.countJYPop-total {
		text-align: right;
		padding-right: 30rpx;

		text {
			font-size: 26rpx;
			color: #999;

			&:nth-child(2) {
				margin-left: 10rpx;
				color: #333;
			}

			&:nth-child(3) {
				font-size: 20rpx;
				color: #FF4C4C;
			}

			&:nth-child(4) {
				color: #FF4C4C;
			}

			&:nth-child(5) {
				font-size: 20rpx;
				color: #FF4C4C;
			}
		}
	}

	.countJYPop-btn {
		margin-top: 50rpx;
	}

	.mdyPricePop {
		width: 600rpx;
	}

	.mdyPricePop-header {
		line-height: 100rpx;
		font-size: 36rpx;
		color: #333;
		text-align: center;
	}

	.mdyPricePop-main {
		padding: 0 50rpx 60rpx;
	}

	.mdyPricePop-input {
		margin: 10rpx 0 30rpx;

		input {
			border: 1px solid #e6e6e6;
			height: 90rpx;
			border-radius: 10rpx;
			padding: 0 30rpx;
		}

		::v-deep .phcClass {
			color: #ccc;
		}
	}

	.mdyPricePop-tips {
		font-size: 24rpx;
		color: #999;
		display: flex;

		text {
			display: block;
		}
	}

	.mdyPricePop-footer {
		display: flex;
		border-top: 1px solid $g-border-color;
	}

	.mdyPricePop-btn {
		flex: 1;
		line-height: 100rpx;
		text-align: center;

		&:first-child {
			position: relative;
			font-size: 32rpx;

			&::after {
				position: absolute;
				right: 0;
				top: 50%;
				content: '';
				width: 2rpx;
				height: 60rpx;
				transform: translateY(-50%);
				border-radius: 2rpx;
				background-color: $g-main-bg;
			}
		}

		&:last-child {
			font-size: 32rpx;
			color: $g-main-color;
		}
	}

	.countDHPop {
		position: relative;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);

		.countDH-list {
			background-color: #fff;
		}

		.countDH-item {
			width: 750rpx;
			display: flex;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}

		.countDH-img {
			width: 120rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			font-size: 0;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				background-color: $g-main-bg;
			}
		}

		.countDH-main {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.countDH-title {
			max-width: 390rpx;
			font-size: 24rpx;
		}

		.countDH-mainM {
			text {
				&:first-child {
					font-size: 20rpx;
					color: #ff4c4c;
				}

				&:nth-child(2) {
					font-size: 28rpx;
					color: #ff4c4c;
				}

				&:nth-child(3) {
					font-size: 20rpx;
					color: #ff4c4c;
				}

				&:nth-child(4) {
					font-size: 20rpx;
					color: #999;
				}

				&:nth-child(5) {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.countDH-tips {
			font-size: 24rpx;
			color: #999;
		}

		.countDH-R {
			display: flex;
			align-items: center;
		}

		.countDH-R_btn {
			width: 140rpx;
			line-height: 60rpx;
			border: 1px solid $g-border-color;
			border-radius: 30rpx;
			text-align: center;
			font-size: 24rpx;
			color: #333;
		}

		.emptyDiff {
			padding: 0 30rpx;
			margin-top: 20rpx;
			height: 100rpx;
			background-color: #fff;
		}

		.emptyDiff-label {}

		.emptyDiff-R {
			input {
				text-align: right;
			}
		}

		.emptyDiff-unit {
			position: relative;
			margin-left: 26rpx;
			padding-right: 44rpx;

			&::after {
				position: absolute;
				right: 14rpx;
				top: 26rpx;
				transform: translateY(-50%);
				content: '';
				border: 10rpx solid transparent;
				border-top: 10rpx solid #444;
			}
		}

		.detail {
			margin-top: 20rpx;
			background-color: #fff;
		}

		.block {
			width: 750rpx;
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid $g-border-color;
		}

		.block-L {}

		.block-R {
			display: flex;
			align-items: center;

			input {
				text-align: right;
				margin-right: 20rpx;
			}
		}

		.addBlock {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			text {
				margin-left: 10rpx;
				color: $g-main-color;
			}
		}
	}

	.countDHPop-close {
		position: absolute;
		right: 20rpx;
		top: 30rpx;
	}

	.countDHPop-header {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.countDHPop-list {
		// padding: 30rpx 30rpx 0;
		max-height: 65vh;
		box-sizing: border-box;
	}

	.countDHPop-item {
		display: flex;
		margin-bottom: 30rpx;

		&.app_arrow {
			&::after {
				right: 10rpx;
				width: 14rpx;
				height: 14rpx;
			}
		}
	}

	.countDHPop-img {
		width: 120rpx;
		flex-shrink: 0;
		margin-right: 20rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.countDHPop-main {
		flex: 1;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// max-width: 380rpx;
	}

	.countDHPop-title {
		// max-width: 340rpx;
	}

	.countDHPop-mainM {
		text {
			&:first-child {
				font-size: 20rpx;
				color: #ff4c4c;
			}

			&:nth-child(2) {
				font-size: 28rpx;
				color: #ff4c4c;
			}

			&:nth-child(3) {
				font-size: 20rpx;
				color: #ff4c4c;
			}

			&:nth-child(4) {
				font-size: 20rpx;
				color: #999;
			}

			&:nth-child(5) {
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.countDHPop-tips {
		font-size: 24rpx;
		color: #999;
	}

	.countDHPop-R {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		margin-left: 20rpx;
		flex-shrink: 0;
		max-width: 190rpx;
	}

	.countDHPop-R_text {
		font-size: 24rpx;
		color: #999;
	}

	.countDHPop-mdPrice {
		padding-right: 26rpx;

		&::after {
			right: 10rpx;
		}
	}

	.countDHPop-total {
		text-align: right;
		padding-right: 30rpx;

		text {
			font-size: 26rpx;
			color: #999;

			&:nth-child(2) {
				margin-left: 10rpx;
				color: #333;
			}

			&:nth-child(3) {
				font-size: 20rpx;
				color: #FF4C4C;
			}

			&:nth-child(4) {
				color: #FF4C4C;
			}

			&:nth-child(5) {
				font-size: 20rpx;
				color: #FF4C4C;
			}
		}
	}

	.countDHPop-btn {
		margin-top: 50rpx;
	}
</style>
